<template>
  <div class="mu">
    <div class="kp">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="medium">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="zp1">
      <img src="../assets/che1.jpg" alt="" />
      <img src="../assets/che2.jpg" alt="" />
    </div>
    <div class="zp2">
      <img src="../assets/che3.jpg" alt="" />
      <img src="../assets/che4.jpg" alt="" />
    </div>

    <div class="donghua">
      <el-button @click="show2 = !show2">看寻更多帅车</el-button>

      <div class="tupi3" style="display: flex; margin-top: 20px; height: 100px">
        <transition name="el-zoom-in-center">
          <div v-show="show2" class="transition-box">
            <img src="../assets/che3.jpg" alt="" />
          </div>
        </transition>

        <transition name="el-zoom-in-top">
          <div v-show="show2" class="transition-box">
            <img src="../assets/che4.jpg" alt="" />
          </div>
        </transition>

        <transition name="el-zoom-in-bottom">
          <div v-show="show2" class="transition-box">
            <img src="../assets/che2.jpg" alt="" />
          </div>
        </transition>
      </div>
    </div>

    <div class="donghua2">
      <el-button @click="show = !show">这里还有呢</el-button>

      <div class="tup2" style="display: flex; margin-top: 20px; height: 100px">
        <transition name="el-fade-in-linear">
          <div v-show="show" class="transition-box">
            <img src="../assets/动画2.jpg" alt="" />
          </div>
        </transition>
        <transition name="el-fade-in">
          <div v-show="show" class="transition-box1">
            <img src="../assets/帅的扣.jpg" alt="" />
          </div>
        </transition>
        <transition name="el-fade-in-linear">
          <div v-show="show" class="transition-box">
            <div class="demo-image__preview">
              <el-image :src="url" :preview-src-list="srcList"> </el-image>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "https://www.ford.com.cn/content/ford/cn/zh_cn/home/performance/2021-Mustang-NEWModel/jcr:content/par/common_box_1608772476/generalParsys/brandgallery/image8/image.imgs.full.high.png/1667549592159.imgs.full.high.png/1667549621536.png",
      srcList: [
        "https://ts1.cn.mm.bing.net/th/id/R-C.6d3dbe93f4592be5b5f1304cb243b161?rik=h7aKNlwiVh1d4g&riu=http%3a%2f%2fst.automobilemag.com%2fuploads%2fsites%2f11%2f2017%2f12%2fShelby-GT-500CR-front-three-quarter-01.jpg&ehk=OP3qpaLGuIr3TKBZQl1HBxfCbvyQ76Gmd6Zn1ybw7M0%3d&risl=&pid=ImgRaw&r=0",
        "https://hdqwalls.com/wallpapers/black-ford-mustang-2019-5k-xu.jpg",
        "https://www.topgear.com/sites/default/files/cars-car/carousel/2018/03/mustang_lightning_blue_012.jpg",
        "https://www.hdcarwallpapers.com/walls/ford_mustang_gt_fastback_r_spec_2019_4k-HD.jpg",
      ],
      show2: false,
      show: false,
    };
  },
};
</script>


<style lang="less" scoped> 

.transition-box1 {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
  padding: 40px 0 0 100px;
}
.tupi3 {
  position: relative;
  right: 10%;
  top: -17px;
}
.tup2 {
  position: relative;
  right: 10%;
  top: -17px;
}
.donghua {
  position: relative;
  right: -42%;
  top: -300%;
  width: 481px;
}
.donghua2 {
  position: relative;
  right: -42%;
  top: -240%;
  width: 481px;
}
.donghua img {
  width: 190px;
  height: 190px;
}
.donghua2 img {
  width: 290px;
  height: 220px;
}
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;

  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
.zp1 {
  height: 340px;
  padding: 45px 0 0 0;
}
.zp1 img {
  width: 340px;
  height: 290px;
}
.zp2 img {
  width: 340px;
  height: 290px;
}

.mu {
  height: 210px;
}
.kp {
  height: 200px;
}
h1 {
  color: red;
  font-size: 100px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-image: url(../assets/ford-mustang.jpg);
  background-size: contain;
  width: 725px;
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url(../assets/76928.jpg);
  background-size: contain;
  width: 725px;
}
.demo-image__preview {
    width: 249px;
    padding: 0 0 0 167px;
}

</style>